<template>
  <div>
    <a-card>
      <a-button type="primary" :icon="h(PlusOutlined)" class="mb-4" @click="handleAdd">
        添加
      </a-button>
      <a-table
        v-if="showTable"
        :columns="columns"
        :data-source="tree"
        :loading="tableLoading"
        :row-key="(row) => row.ssoOrganizationId + ''"
        default-expand-all-rows
        expandRowByClick
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'actions'">
            <a-button
              size="small"
              type="link"
              @click.stop="handleAdd(record)"
            >
              <a-tooltip>
                <template #title>添加</template>
                <PlusOutlined />
              </a-tooltip>
            </a-button>
            <a-button size="small" type="link" @click.stop="handleEdit(record)">
              <a-tooltip>
                <template #title>编辑</template>
                <EditOutlined />
              </a-tooltip>
            </a-button>
            <a-button size="small" type="link" danger @click.stop="handleDelete(record)">
              <a-tooltip>
                <template #title>删除</template>
                <DeleteOutlined />
              </a-tooltip>
            </a-button>
          </template>
        </template>
      </a-table>
    </a-card>
    <a-modal
      v-model:open="showModal"
      :mask-closable="false"
      :title="title"
      :confirm-loading="formBtnLoading"
      @ok="handleConfirm"
    >
      <a-form ref="formRef" :model="form" :rules="rules" :label-col="{ span: 5 }" class="pt-1">
        <a-form-item label="组织名称" name="name">
          <a-input
            v-model:value="form.name"
            allow-clear
            show-count
            :maxlength="15"
            placeholder="请输入组织名称"
          />
        </a-form-item>
        <a-form-item label="组织描述" name="remark">
          <a-input
            v-model:value="form.remark"
            allow-clear
            show-count
            :maxlength="15"
            placeholder="请输入组织描述"
          />
        </a-form-item>
        <a-form-item label="父级组织" name="ssoOrganizationPid">
          <a-select
            v-model:value="form.ssoOrganizationPid"
            placeholder="请选择父级组织"
            option-filter-prop="label"
            :options="parentOpts"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { computed, h, onMounted, reactive, ref } from 'vue';
import OrganizationApi from '@/api/SsoOrganizationApi';
import {
  PlusOutlined,
  DeleteOutlined,
  EditOutlined,
} from '@ant-design/icons-vue';
import { message, Modal } from 'ant-design-vue';
import { Rule } from 'ant-design-vue/es/form';
import { resetReactive } from '@/utils';

let columns = [
  { title: '组织名称', dataIndex: 'name' },
  { title: '组织描述', dataIndex: 'remark' },
  { title: '创建时间', dataIndex: 'createTime' },
  { title: '更新时间', dataIndex: 'updateTime' },
  {
    title: '操作',
    dataIndex: 'actions',
    align: 'center',
  },
];
const parentOpts = computed(() => {
  return data.value
    .map((i: SsoOrganization) => {
      return {
        label: i.name,
        value: i.ssoOrganizationId,
      };
    });
});
let data = ref([]);
let tree = ref([]);
onMounted(() => {
  getList();
});

const tableLoading = ref(false);
const showTable = ref(false);

function getList() {
  tableLoading.value = true;
  OrganizationApi.getListTree()
    .then((res) => {
      data.value = res.data[0].list;
      tree.value = res.data[0].tree;
    })
    .finally(() => {
      tableLoading.value = false;
      showTable.value = true;
    });
}

const showModal = ref(false);
const title = ref('');
const formRef = ref();
const form = reactive<SsoOrganization>({
  ssoOrganizationId:0,
  name: "",
  remark:"",
  ssoOrganizationPid:0,
});
const rules: Record<string, Rule[]> = {
  name: [{ required: true, trigger: 'blur', message: '请输入' }],
  remark: [{ required: true, trigger: 'blur', message: '请输入' }],
};

function handleEdit(row) {
  showModal.value = true;
  title.value = '编辑';
  Object.assign(form, row);
  formRef.value?.clearValidate();
}

function handleAdd(record) {
  showModal.value = true;
  title.value = '添加';
  resetReactive(form);
  if (record) {
    form.ssoOrganizationPid = record.ssoOrganizationId;
  }
  formRef.value?.clearValidate();
}

const formBtnLoading = ref(false);

function handleConfirm() {
  formRef.value
    .validate()
    .then(() => {
      formBtnLoading.value = true;
      (form.ssoOrganizationId ? OrganizationApi.update(form) : OrganizationApi.save(form))
        .then(() => {
          message.success('提交成功');
          showModal.value = false;
          getList();
        })
        .finally(() => {
          formBtnLoading.value = false;
        });
    })
    .catch(() => {});
}

function handleDelete(row) {
  Modal.confirm({
    title: '提示',
    content: '确定删除这条记录吗',
    okText: '确定',
    cancelText: '取消',
    onOk: () => {
      OrganizationApi.delete([row.ssoOrganizationId]).then(() => {
        message.success('操作成功');
        getList();
      });
    },
    onCancel: () => {},
  });
}
</script>

<style scoped></style>
